{% extends "front/front_base.html" %}
{% from "common/macros.html" import static %}

{% block title %}
    {{ post.title }}
{% endblock %}

{% block head %}
    <script src="{{ static("ueditor/ueditor.config.js") }}"></script>
    <script src="{{ static("ueditor/ueditor.all.min.js") }}"></script>
    <link rel="stylesheet" href="{{ static('front/css/front_post_detail.css') }}">
    <script src="{{ static("front/js/front_add_comments.js") }}"></script>
{% endblock %}

{% block body %}
    <div class="lg-container">
        <div class="post-container">
            <div class="post-top">
            <h1>{{ post.title }}</h1>
        </div>
        <p class="post-info-group">
            <span>发表时间:{{ post.create_time }}</span>
            <span>作者:{{ post.author.username }}</span>
            <span>所属版块:{{ post.board.name }}</span>
            <span>阅读数:0</span>
            <span>点赞数:0</span>
        </p>
        <article class="post-content">
            {{ post.context|safe }}
        </article>
    </div>
    <div class="comment-group">
        <h3>评论列表</h3>
        <ul class="comment-list-group" id="post-id" data-post="{{ post.id }}">
            {% for comment in post.comments %}
                <li>
                <div class="avatar-group">
                    <img src="{{ comment.author.avatar or static('common/images/logo.jpg') }}" alt="">
                </div>
                <div class="comment-context">
                    <p class="author-info">
                        <span>{{ comment.author.username }}</span>
                        <span>{{ comment.create_time }}</span>
                    </p>
                    <p>{{ comment.context|safe }}</p>
                </div>
                </li>
            {% endfor %}
        </ul>
        <div class="add-comment-group">
            <h3>发布评论</h3>
             <script id="container" name="content" style="height: 50px" type="text/plain"></script>
            <div class="comment-btn-group">
                <button class="btn btn-primary" id="comment-btn">发表评论</button>
            </div>
        </div>
    </div>
    </div>




    <div class="sm-container"></div>

{% endblock %}